<script setup>
import {reactive, ref} from "vue";

const shouldCount = ref(1210)
const nowCount = ref(0)
let websocket = null;
if ('WebSocket' in window) {
  // 创建WebSocket连接
  websocket = new WebSocket('ws://localhost:5151/ws/' + "count3");
}
//连接发生错误
websocket.onerror = function (event) {
  console.log('连接错误');
};
//连接成功建立的回调方法
websocket.onopen = function (event) {
  console.log('WebSocket连接成功');
};

//接收到消息的回调方法
websocket.onmessage = function (event) {
  nowCount.value = JSON.parse(event.data).nowCount
}

//连接关闭的回调方法
websocket.onclose = function () {
  console.log("WebSocket连接关闭")
}

//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function () {
  websocket.close();
}

</script>

<template>
  <div class="count">
    <span style="color: yellow">报到应到人数: <i>{{ shouldCount }}</i> 人</span>
    <span style="color: yellow">实际报到人数: <i>{{ nowCount }}</i> 人</span>
  </div>
</template>

<style scoped>
.count span {
  margin-right: 50px;
  line-height: 100px;
  font-size: 30px;
}

.count i {
  font-size: 25px;
  color: #13ce66;
  font-weight: bolder;
}

.count {
  text-align: center;
  width: 100%;
  height: 100px;
}
</style>
